<template>
  <div class="settings-page">
    <h2>性能设置</h2>
    
    <div class="settings-section">
      <n-form
        ref="formRef"
        :model="performanceSettings"
        label-placement="left"
        label-width="160"
        require-mark-placement="right-hanging"
      >
        <!-- 渲染设置 -->
        <n-divider>渲染设置</n-divider>
        
        <n-form-item label="渲染质量" path="renderQuality">
          <n-select
            v-model:value="performanceSettings.renderQuality"
            :options="qualityOptions"
            style="width: 200px"
          />
        </n-form-item>
        
        <n-form-item label="预览分辨率" path="previewResolution">
          <n-select
            v-model:value="performanceSettings.previewResolution"
            :options="resolutionOptions"
            style="width: 200px"
          />
        </n-form-item>
        
        <n-form-item label="硬件加速" path="hardwareAcceleration">
          <n-switch v-model:value="performanceSettings.hardwareAcceleration" />
        </n-form-item>
        
        <n-form-item label="最大帧率" path="maxFPS">
          <n-input-number
            v-model:value="performanceSettings.maxFPS"
            :min="24"
            :max="120"
            style="width: 150px"
          >
            <template #suffix>FPS</template>
          </n-input-number>
        </n-form-item>
        
        <n-form-item label="显示FPS计数器" path="showFPS">
          <n-switch v-model:value="performanceSettings.showFPS" />
        </n-form-item>
        
        <!-- 内存设置 -->
        <n-divider>内存设置</n-divider>
        
        <n-form-item label="最大内存使用" path="maxMemoryUsage">
          <n-slider
            v-model:value="performanceSettings.maxMemoryUsage"
            :step="256"
            :min="1024"
            :max="8192"
            :marks="memoryMarks"
            style="width: 300px"
          />
        </n-form-item>
        
        <n-form-item label="缓存大小" path="cacheSize">
          <n-input-number
            v-model:value="performanceSettings.cacheSize"
            :min="100"
            :max="10000"
            style="width: 150px"
          >
            <template #suffix>MB</template>
          </n-input-number>
        </n-form-item>
        
        <n-form-item label="自动清理缓存" path="autoClearCache">
          <n-switch v-model:value="performanceSettings.autoClearCache" />
        </n-form-item>
        
        <n-form-item label="低内存警告阈值" path="lowMemoryThreshold">
          <n-input-number
            v-model:value="performanceSettings.lowMemoryThreshold"
            :min="5"
            :max="50"
            style="width: 150px"
          >
            <template #suffix>%</template>
          </n-input-number>
        </n-form-item>
        
        <!-- 多线程设置 -->
        <n-divider>多线程设置</n-divider>
        
        <n-form-item label="后台处理" path="backgroundProcessing">
          <n-switch v-model:value="performanceSettings.backgroundProcessing" />
        </n-form-item>
        
        <n-form-item label="最大工作线程数" path="maxWorkerThreads">
          <n-input-number
            v-model:value="performanceSettings.maxWorkerThreads"
            :min="1"
            :max="16"
            style="width: 150px"
          >
            <template #suffix>线程</template>
          </n-input-number>
        </n-form-item>
        
        <n-form-item label="预加载资源" path="preloadAssets">
          <n-switch v-model:value="performanceSettings.preloadAssets" />
        </n-form-item>
        
        <!-- 优化提示 -->
        <n-divider>性能提示</n-divider>
        
        <div class="performance-tips">
          <n-alert title="性能优化建议" type="info">
            <template #icon>
              <n-icon>
                <BulbOutline />
              </n-icon>
            </template>
            <ol>
              <li>提高渲染质量会增加GPU负载，如果遇到卡顿，请降低渲染质量</li>
              <li>如果您的设备内存较小，建议降低最大内存使用量和缓存大小</li>
              <li>启用硬件加速可以提高渲染性能，但在某些老旧设备上可能导致问题</li>
              <li>多线程设置主要影响导出和渲染速度，线程数不宜设置过高</li>
            </ol>
          </n-alert>
        </div>
        
        <div class="performance-status">
          <n-statistic label="系统检测">
            <n-space align="center">
              <n-tag :type="performanceStatus.cpuType">
                CPU: {{ performanceStatus.cpu }}
              </n-tag>
              <n-tag :type="performanceStatus.gpuType">
                GPU: {{ performanceStatus.gpu }}
              </n-tag>
              <n-tag :type="performanceStatus.memoryType">
                内存: {{ performanceStatus.memory }}
              </n-tag>
              <n-tag :type="performanceStatus.storageType">
                存储: {{ performanceStatus.storage }}
              </n-tag>
            </n-space>
          </n-statistic>
        </div>
      </n-form>
      
      <div class="form-actions">
        <n-space>
          <n-button @click="runPerformanceTest" quaternary>
            <template #icon><n-icon><SpeedometerOutline /></n-icon></template>
            运行性能测试
          </n-button>
          <n-button @click="optimizeForDevice" quaternary>
            <template #icon><n-icon><HardwareChipOutline /></n-icon></template>
            根据设备优化
          </n-button>
          <n-button @click="resetToDefaults" quaternary>恢复默认设置</n-button>
          <n-button type="primary" @click="saveSettings">保存设置</n-button>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import {
  NForm,
  NFormItem,
  NSelect,
  NSlider,
  NSwitch,
  NInputNumber,
  NButton,
  NSpace,
  NDivider,
  NAlert,
  NIcon,
  NStatistic,
  NTag
} from 'naive-ui'
import {
  SpeedometerOutline,
  HardwareChipOutline,
  BulbOutline
} from '@vicons/ionicons5'

const message = useMessage()
const formRef = ref(null)

// 性能设置表单
const performanceSettings = reactive({
  renderQuality: 'medium',
  previewResolution: 'half',
  hardwareAcceleration: true,
  maxFPS: 60,
  showFPS: false,
  maxMemoryUsage: 2048,
  cacheSize: 1000,
  autoClearCache: true,
  lowMemoryThreshold: 15,
  backgroundProcessing: true,
  maxWorkerThreads: 4,
  preloadAssets: true
})

// 性能状态
const performanceStatus = reactive({
  cpu: '未检测',
  cpuType: 'default',
  gpu: '未检测',
  gpuType: 'default',
  memory: '未检测',
  memoryType: 'default',
  storage: '未检测',
  storageType: 'default'
})

// 渲染质量选项
const qualityOptions = [
  { label: '低 (更快)', value: 'low' },
  { label: '中 (平衡)', value: 'medium' },
  { label: '高 (更好)', value: 'high' },
  { label: '最高 (最佳效果)', value: 'ultra' }
]

// 预览分辨率选项
const resolutionOptions = [
  { label: '全分辨率', value: 'full' },
  { label: '1/2 分辨率', value: 'half' },
  { label: '1/4 分辨率', value: 'quarter' }
]

// 内存标记
const memoryMarks = {
  1024: '1GB',
  2048: '2GB',
  4096: '4GB',
  8192: '8GB'
}

// 默认设置
const defaultSettings = {
  renderQuality: 'medium',
  previewResolution: 'half',
  hardwareAcceleration: true,
  maxFPS: 60,
  showFPS: false,
  maxMemoryUsage: 2048,
  cacheSize: 1000,
  autoClearCache: true,
  lowMemoryThreshold: 15,
  backgroundProcessing: true,
  maxWorkerThreads: 4,
  preloadAssets: true
}

// 加载设置
function loadSettings() {
  // 实际项目中，这里会从本地存储或API加载设置
  const savedSettings = localStorage.getItem('performanceSettings')
  if (savedSettings) {
    try {
      const parsedSettings = JSON.parse(savedSettings)
      Object.assign(performanceSettings, parsedSettings)
    } catch (error) {
      console.error('Failed to parse saved settings:', error)
    }
  }
}

// 保存设置
function saveSettings() {
  // 实际项目中，这里会调用API保存设置
  localStorage.setItem('performanceSettings', JSON.stringify(performanceSettings))
  message.success('性能设置已保存')
  
  // 应用设置
  applySettings()
}

// 应用设置
function applySettings() {
  // 实际项目中，这里会应用性能设置
  console.log('Performance settings applied:', performanceSettings)
}

// 恢复默认设置
function resetToDefaults() {
  Object.assign(performanceSettings, defaultSettings)
  message.info('已恢复默认设置')
}

// 运行性能测试
function runPerformanceTest() {
  message.info('性能测试开始...')
  
  // 模拟性能测试过程
  setTimeout(() => {
    performanceStatus.cpu = 'Intel i7-10700K'
    performanceStatus.cpuType = 'success'
    performanceStatus.gpu = 'NVIDIA RTX 3070'
    performanceStatus.gpuType = 'success'
    performanceStatus.memory = '16GB'
    performanceStatus.memoryType = 'success'
    performanceStatus.storage = 'SSD 500GB'
    performanceStatus.storageType = 'success'
    
    message.success('性能测试完成')
  }, 2000)
}

// 根据设备优化
function optimizeForDevice() {
  // 模拟根据设备优化
  setTimeout(() => {
    performanceSettings.renderQuality = 'high'
    performanceSettings.hardwareAcceleration = true
    performanceSettings.maxFPS = 60
    performanceSettings.maxMemoryUsage = 4096
    performanceSettings.maxWorkerThreads = 8
    
    message.success('已根据您的设备优化性能设置')
  }, 1000)
}

// 检测系统性能
function detectSystemPerformance() {
  // 实际项目中，这里会调用API检测系统性能
  // 这里使用模拟数据
  setTimeout(() => {
    performanceStatus.cpu = 'Intel i7-10700K'
    performanceStatus.cpuType = 'success'
    performanceStatus.gpu = 'NVIDIA RTX 3070'
    performanceStatus.gpuType = 'success'
    performanceStatus.memory = '16GB'
    performanceStatus.memoryType = 'success'
    performanceStatus.storage = 'SSD 500GB'
    performanceStatus.storageType = 'success'
  }, 500)
}

// 组件挂载时加载设置
onMounted(() => {
  loadSettings()
  detectSystemPerformance()
})
</script>

<style lang="scss" scoped>
.settings-page {
  padding: 0 16px;
  
  h2 {
    margin-top: 0;
    margin-bottom: 24px;
    font-weight: 500;
  }
  
  .settings-section {
    max-width: 800px;
  }
  
  .performance-tips {
    margin-bottom: 20px;
  }
  
  .performance-status {
    margin: 20px 0;
    padding: 16px;
    background-color: var(--card-color);
    border-radius: 4px;
  }
  
  .form-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
  }
}
</style> 